<template>
    <div class="ShopTrolley">
        <van-sticky>
            <div class="ShopTrolley-Header">
                <p @click="back"> <img style="  width: 30px;
            height: 30px;" src="../assets/images/Detai/triver_miniapp_bar_return_dark.png"> </p>
                <h3 class="ShopTrolley-title">购物车</h3>
                <div class="ShopTrolley-Set">
                    <div class="ShopTrolley-Edit" v-show="!isEdit" @click="change">编辑</div>
                    <div class="ShopTrolley-Complete" v-show="isEdit" @click="change">完成</div>
                </div>
            </div>
        </van-sticky>
        <div class="ShopTrolley-Body">
            <van-empty image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="80"
                v-if="carList.length == 0">
                <template #default>
                    <div>
                        <span style="color: #bfbfbf;">购物车空空的</span>

                    </div>
                </template>
            </van-empty>
            <ul class="ProductBox" v-if="carList.length > 0">
                <li class="Product" v-for="item in carList">
                    <div class="ShopTrolley-check">
                        <input v-model="item.check" type="checkbox" @change="changeCheck">
                    </div>
                    <div class="ProductImgBox">
                        <img :src="item.img">
                    </div>
                    <div class="ProductCom">
                        <h3 class="txt-cut">{{ item.name }}</h3>
                        <span class="one-txt-cut Product-illustrate"> </span>
                        <p class="price Product-price">
                            <i>￥{{ item.price }}</i>
                            <span></span>
                        </p>
                        <!-- <span class="amount">X </span> -->
                    </div>
                    <van-stepper v-model="item.count" input-width="25px" button-size="25px" />
                </li>

            </ul>

        </div>
        <!-- 热卖商品 -->

        <van-submit-bar :price="total" button-text="结算" label="合计:" currency=" ">
            <label for="SelectAll">
                <input type="checkbox" id="SelectAll" v-model="checkAll">
                全选
            </label>
            <template #button>
                <van-button type="primary" :disabled="carList.length == 0 || !flag" v-show="!isEdit"
                    @click="submit">提交订单</van-button>
                <van-button type="primary" :disabled="carList.length == 0 || !flag" v-show="isEdit" @click="del"
                    color="red">删除</van-button>
            </template>
        </van-submit-bar>
        <div style="height: 50px;"></div>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, computed } from 'vue';
import { carListStore, orderStore } from '@/stores/shopCar'
import router from '@/router';
export default defineComponent({
    setup() {
        const changeCheck = () => {
            if (carList != null) {
                let res = carList.value.some(function (item) {
                    return item.check
                })
                // flag.value = res
            }
        }
        const back = () => {
            router.back()
        }
        let isEdit = ref(false)
        let flag = computed({
            get: () => {
                return carList.value.some((item: any) => {
                    return item.check;
                })
            },
            set: () => {

            }
        })

        const change = () => {
            isEdit.value = !isEdit.value
        }
        let readycarList = ref()
        let carList = computed(() => {
            return carListStore().$state.carList
        })
        console.log(carList.value);

        const submit = () => {
            readycarList.value = carList.value.filter((item: any) => {
                return item.check == true//选中的，假如pinia里面的确认订单里面
            })
            orderStore().submitOrder(readycarList.value)//利用pinia里面的方法，推进订单里面
            router.push('/OrderSettlement')
        }

        const del = () => {
            readycarList.value = carList.value.filter((item: any) => {
                return item.check == false
            })
            carListStore().delCarr(readycarList.value)//利用pinia里面的方法，推进订单里

        }
        const checkAll = computed({
            get: () => {
                if (carList.value.length == 0) {
                    return false
                } else {
                    return carList.value.every((item: any) => {
                        return item.check;
                    })
                }

            },
            set: (value) => {
                carList.value.forEach((item: any) => {
                    item.check = value;
                })
            }
        })
        const total: any = computed(() => {
            return carList.value.reduce((totalMoney: number, item: any): any => {
                if (item.check) {
                    return totalMoney + (item.count * item.price) * 100
                } else {
                    return totalMoney
                }
            }, 0)
        })

        return {
            isEdit, change, submit, del, carList, total, checkAll, flag, changeCheck, back
        }
    }
})



</script>
<style lang="scss" scoped>
.van-button__text {
    font-size: 14px;
}

input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 50%;
    width: 23px;
    height: 23px;
    border: 1px solid #ccc;
    margin-right: 10px;
    position: relative;
}

input[type="checkbox"]:checked {
    background-color: #2196F3;
}

input[type="checkbox"]:checked::before {
    content: "";
    position: absolute;
    top: 20%;
    left: 16%;
    width: 9px;
    height: 4px;
    border: 2px solid #fff;
    border-top-color: transparent;
    border-right-color: transparent;
    transform: rotate(-45deg);
    -ms-transform: rotate(311deg);
    -moz-transform: rotate(311deg);
    -webkit-transform: rotate(311deg);
}

label {
    display: flex;
    align-items: center;
    max-width: 20%;
}

.ShopTrolley-Header {
    height: 86px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 19px;
    background-color: #fff;

    .ShopTrolley-title {
        font-weight: bold;
        font-size: 16px;
    }

    .ShopTrolley-Set {
        display: flex;
        color: #57a0ff;
        font-size: 14px;
    }

}

.ShopTrolley-setAll {
    padding: 0 18px 15px;
    border-bottom: 1px solid #f2f0f0;
    background-color: #fff;
    font-size: 14px;
}

.logintips {
    display: flex;
    padding: 10px 15px;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    background: #000000;

    h1 {
        font-size: 14px;
        color: #fff;
    }

    span {
        color: red;
    }
}

.ShopTrolley-Body {
    background-color: #fff;
    min-height: 40vh;

    .van-empty {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        .van-empty__bottom {
            >div {
                display: flex;
                flex-direction: column;
                align-items: center;

                >span {
                    color: rgb(191, 191, 191);
                    font-size: 14px;
                    margin-bottom: 10px;
                }

                .van-button {
                    padding: 4px 9px;
                    font-size: 14px;
                    border-radius: 12px;
                    height: auto;

                    .van-button__text {
                        font-weight: bold;
                        color: #ee0a24;
                        font-size: 12px;
                    }
                }
            }
        }
    }
}



.ProductBox {
    min-height: 40vh;


    .Product {
        display: flex;
        align-items: center;
        height: 135px;
        border-bottom: 3px solid #f9f9f9;
        position: relative;
        padding: 0 19px;

        .ShopTrolley-checkbox {
            margin-right: 8px;

        }

        .ProductImgBox {
            height: 89px;
            width: 89px;
            flex-shrink: 0;
            margin: 0 7px;

            img {
                object-fit: cover;
            }
        }

        .ProductCom {
            flex: 1;
            display: flex;
            flex-direction: column;
            margin-top: 10px;
            overflow: hidden;


            h3 {
                height: 40px;
                font-size: 14px;
                font-weight: bold;
                display: block;
            }

            .Product-illustrate {
                font-size: 12px;
                color: #9b9b9b;
                padding-bottom: 11px;
            }

            .Product-price {
                padding-bottom: 8px;
            }

            .amount {
                font-size: 12px;
                color: #9b9b9b;
            }
        }

        .van-stepper {
            position: absolute;
            right: 10px;
            bottom: 10px;
            border: 1px solid #cacaca;
            border-radius: 4px;
            box-sizing: border-box;

            .van-stepper__minus,
            .van-stepper__plus {
                background-color: #fff;
                color: #606060;
            }

            .van-stepper__input {
                margin: 0;
                border-left: 1px solid #cacaca;
                border-right: 1px solid #cacaca;
                background-color: #fff;
                font-weight: bold;
                box-sizing: border-box;
                padding-top: 1px;
            }
        }
    }

}

.van-submit-bar {
    // bottom: 50px;

    .van-submit-bar__price {
        margin-left: 2px;
    }

    :deep(.van-submit-bar__bar) {

        // width: 100%;
        padding: 0 0 0 10px;
        box-sizing: border-box;


        .van-button--round {
            border-radius: 0;
        }

        .van-button {
            border-radius: 0;
            height: 100%;
            width: 120px;
        }
    }
}

.recomBox {
    margin-top: 50px;

    .recomBox-Header {
        height: 52px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .recomBox-title {
            font-size: 16px;
            font-weight: bold;
        }

        .recomBox-line {
            width: 15px;
            height: 3px;
            background-color: #f02a19;
            margin-top: 6px;
        }
    }

    .recomBox-Body {
        .recomList {
            padding-bottom: 100px;
            background: #f4f4f4;
        }

        .recom-ul {
            background-color: #fff;

            .recom-item {
                display: flex;
                height: 108px;
                align-items: center;
                padding: 0 18px;
                box-sizing: border-box;

                .recomImgBox {
                    width: 84px;
                    height: 84px;
                    flex-shrink: 0;
                }

                .recom-conBox {
                    flex: 1;
                    height: 108px;
                    width: 0;
                    display: flex;
                    flex-direction: column;
                    margin-left: 21px;

                    .recom-title {
                        margin-top: 20px;
                        font-size: 16px;
                        font-weight: bold;
                    }
                }

                .recom-illustrate {
                    display: block;
                    padding: 5px 0 15px 0;
                    text-indent: 5px;
                    color: #c00;
                    font-size: 12px;
                }

                .recom-price {
                    line-height: 22px;
                    font-size: 16px;

                    span {
                        transform: scale(0.9) translateY(5%);
                        transform-origin: left;

                    }
                }

            }

        }
    }
}
</style>